<template>
    <div class="itemRoot">
        <div class="ctx">
            <div class="icon">
                <div class="iconImg"><img :src="d.store.img" class="img" alt=""></div>
                <div class="icon_m" v-show="d.goodsList.length > 0">{{ d.store.descrition }}</div>
            </div>
            <div class="ctxInfo">
                <div class="infoH">
                    <div class="s_name">{{ d.store.name }}</div>
                    <div class="infos">
                        <div class="fen">4.8分</div>
                        <div class="much">月销2000+</div>
                        <div class="money">配送￥3.4</div>
                    </div>
                </div>
                <div class="infoF">
                    <!-- 渲染预览上坪 -->
                    <scroll-view class="infoScroll scroll" scroll-left="0" show-scrollbar="false" scroll-x="true">
                        <div class="item" v-for="(item, k) in d.goodsList" :key="k">
                            <div class="item_img"><img :src="item.img" class="img" alt=""></div>
                            <div class="item_name">{{ item.name }}</div>
                            <div class="item_money">￥{{ moneyFormat(item.price) }}</div>
                        </div>
                    </scroll-view>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'InedxItem',

    data() {
        return {

        };
    },
    mounted() {

    },
    props: {
        d: {
            default: {}
        }
    },
    methods: {

    },
};
</script>

<style lang="scss" scoped>
@import '@/uni.scss';

.ctx {
    background: $uni-bg-color;
    border-radius: 15px;
    display: flex;
    padding: 10px;
    box-sizing: border-box;
}

.icon {
    width: 100px;

    .iconImg {
        width: 100%;
        height: 100px;
        background: gainsboro;
        border-radius: 5px;
    }

    .img {
        height: 100%;
        width: 100%;
        background: gainsboro;
        border-radius: 5px;
    }

    .icon_m {
        width: 100%;
        height: calc(100% - 100px);
        background: rgb(253, 243, 236);
        padding: 10px;
        box-sizing: border-box;
        color: rgb(126, 46, 27);
        font-size: 15px;
        border-radius: 0 0 5px 5px;
    }
}

.ctxInfo {
    width: calc(100% - 100px);
    box-sizing: border-box;
    padding-left: 10px;
}

.infoH {
    .s_name {
        font-weight: bold;
        font-size: 25px;
    }

    .infos {
        color: $uni-text-color-placeholder;
        font-size: 15px;
    }

    .fen {
        font-weight: bold;
        color: orangered;
    }

    .fen,
    .much,
    .money {
        margin-right: 10px;
        display: inline-block;
    }
}

.infoF.infoScroll {
    height: 110px;
    width: 100%;
}

.infoScroll {
    white-space: nowrap;
}

.infoF {
    margin-top: 10px;

    .item {
        display: inline-block;
        width: 100px;
        box-sizing: border-box;
        padding-right: 10px;
        font-size: 15px;
    }

    .item_img {
        width: 100%;
        height: 60px;
    }

    .img {
        width: 100%;
        height: 100%;
        background: gainsboro;
        border-radius: 5px;
    }

    .item_name {
        color: black;
    }

    .item_money {
        font-weight: bold;
        color: orangered;
    }
}
</style>